<script setup>

import {deleteSysMenu, getSysMenu, listAllActionByMenuId, listSysMenu} from "@/api/system/menu";
import {getCurrentInstance, ref} from "vue";
import MenuForm from "@/views/system/menu/MenuForm.vue";
import Icon from "@/components/Icon/index.vue";

const {proxy} = getCurrentInstance();
const menuList = ref([]);
const menuFormRef = ref();
const menuData = ref(null);
const activeMenuId = ref()
const menuActionData = ref([]);

const getList = () => {
  listSysMenu().then(resp => {
    menuList.value = []
    let menu = {menuId: 0, title: '根目录', children: []}
    menu.children = resp.data
    menuList.value.push(menu)
  })
  activeMenuId.value && loadMenuDetail();
}

const openMenu = (menuId, type) => {
  menuFormRef.value.open(menuId, type)
}

const deleteMenu = async (menuId) => {
  proxy.$modal.confirm('确定删除该菜单吗？').then(async () => {
    await deleteSysMenu(menuId);
    proxy.$modal.okNotify('删除成功');
    getList();
    activeMenuId.value && await loadMenuDetail();
  })
}

const getMenuDetail = async (e) => {
  if (activeMenuId.value === e.menuId) {
    activeMenuId.value = undefined;
    menuData.value = null;
  } else {
    activeMenuId.value = e.menuId
    activeMenuId.value !== 0 && await loadMenuDetail();
  }
}

const loadMenuDetail = async () => {
  const {data} = await getSysMenu(activeMenuId.value);
  menuData.value = data;
  await loadActionData();
}

const loadActionData = async () => {
  const {data} = await listAllActionByMenuId(activeMenuId.value);
  menuActionData.value = data;
}

getList();
</script>

<template>
  <div class="app-container">
    <div class="grid grid-cols-[1fr_2fr] grid-rows-[auto_1fr] col-span-2 gap-x-1.5rem">
      <el-tree
          style="max-width: 600px"
          :data="menuList"
          node-key="menuId"
          default-expand-all
          :expand-on-click-node="false"
          :props="{
        children: 'children',
        label: 'title'
      }"
          @nodeClick="getMenuDetail"
          :current-node-key="activeMenuId"
          highlight-current
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
        <span>
          <Icon v-if="data.icon" :icon="data.icon" size="16px" color="#333" class="mr-1"/>
          {{ node.label }}
        </span>
            <div>
              <el-button type="primary" link @click.stop="openMenu(data.menuId,'create')" v-hasPermission="['system:menu:add']">新增</el-button>
              <!--              <el-button :disabled="data.menuId === 0" class="ml-2" link @click="openMenu(data.menuId,'update')">编辑-->
              <!--              </el-button>-->
              <el-button :disabled="data.menuId === 0" class="ml-2" type="danger" link @click.stop="deleteMenu(data.menuId)" v-hasPermission="['system:menu:delete']">
                删除
              </el-button>
            </div>
          </div>
        </template>
      </el-tree>
      <div>
        <el-empty v-if="menuData == null" description="请选择菜单查看详情"></el-empty>
        <template v-else>
          <el-descriptions
              :title="menuData.menuName"
              :column="2"
              size="default"
              border
          >
            <template #extra>
              <el-button type="primary" @click="openMenu(activeMenuId,'update')"  v-hasPermission="['system:menu:edit']">编辑</el-button>
            </template>
            <el-descriptions-item label="路由名称">
              {{ menuData?.routeName }}
            </el-descriptions-item>
            <el-descriptions-item label="名称">
              {{ menuData?.menuName }}
            </el-descriptions-item>
            <el-descriptions-item label="路由地址">
              {{ menuData?.path }}
            </el-descriptions-item>
            <el-descriptions-item label="组件路径">
              {{ menuData?.component }}
            </el-descriptions-item>
            <el-descriptions-item label="菜单图标">
              <div class="flex items-center">
                <Icon :icon="menuData?.icon" color="#333" size="14px" class="mr-2"/>
                <span class="text-gray-500">{{ menuData?.icon }}</span>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="是否显示">
              {{ menuData?.visible ? '否' : '是' }}
            </el-descriptions-item>
            <el-descriptions-item label="是否禁用">
              {{ menuData?.status ? '是' : '否' }}
            </el-descriptions-item>
            <el-descriptions-item label="排序">
              {{ menuData?.orderNum }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
              class="mt--20px"
              title="按钮"
              :column="2"
              size="default"
              border
          >
            <template #extra>
              <el-button type="primary" @click="openMenu(activeMenuId,'create')" v-hasPermission="['system:menu:add']">新增</el-button>
            </template>
          </el-descriptions>
          <el-table
              :data="menuActionData"
              :border="true"
          >
            <el-table-column prop="menuName" label="名称"/>
            <el-table-column prop="perms" label="权限标识"/>
            <el-table-column prop="orderNum" label="排序"/>
            <el-table-column fixed="right" label="操作" width="120px">
              <template #default="scope">
                <el-button class="ml-2" link @click="openMenu(scope.row.menuId,'update')" v-hasPermission="['system:menu:edit']">编辑
                </el-button>
                <el-button class="ml-2" type="danger" link @click="deleteMenu(scope.row.menuId)" v-hasPermission="['system:menu:delete']">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <menu-form ref="menuFormRef" @success="getList"/>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-tree-node) {
  padding: 3px 0;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  span {
    @apply flex items-center;
  }
}
</style>
